import React, {useEffect} from 'react';
import {
    Box,
    Card,
    CardContent,
    CardHeader,
    IconButton,
    Paper, Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow, Typography
} from "@mui/material";

import {summary} from "../../api/lesson/lesson-schedule";
import AddIcon from "@mui/icons-material/Add";
import DoneIcon from "@mui/icons-material/Done";
import EditIcon from "@mui/icons-material/Edit";
import CircularProgress from "@mui/material/CircularProgress";
import BlockIcon from "@mui/icons-material/Block";

import ManualSchedule from "./manual-schedule";
import {getDayOfWeek} from "../../utils/time";

// operate button
const OpButton = ({dayOfWeek, classGroup, thisWeek, onClick}) => {

    const thisWeekStatus = classGroup.thisWeek.published;
    if (thisWeek && dayOfWeek === 6) {
        return thisWeekStatus === undefined || null ?
            <IconButton disabled><BlockIcon/></IconButton> :
            <IconButton onClick={() => onClick(classGroup, thisWeek)}><DoneIcon/></IconButton>;
    }

    if (!thisWeek && !thisWeekStatus && dayOfWeek < 6) {
        return <IconButton disabled><BlockIcon/></IconButton>;
    }

    const nextWeekStatus = classGroup.nextWeek.published;
    const status = thisWeek ? thisWeekStatus : nextWeekStatus;

    switch (status) {
        case true:
            return <IconButton onClick={() => onClick(classGroup, thisWeek)}><DoneIcon/></IconButton>;
        case false:
            return <IconButton onClick={() => onClick(classGroup, thisWeek)}><EditIcon/></IconButton>;
        default:
            return <IconButton onClick={() => onClick(classGroup, thisWeek)}><AddIcon/></IconButton>;
    }
};

function LessonSchedule() {

    const [dayOfWeek] = React.useState(getDayOfWeek());

    const [loading, setLoading] = React.useState(false);
    const [classGroups, setClassGroups] = React.useState([]);

    const [open, setOpen] = React.useState(false);
    const [classGroup, setClassGroup] = React.useState(null);
    const [thisWeek, setThisWeek] = React.useState(true);

    useEffect(() => {
        loadSummary();
    }, []);

    const loadSummary = () => {
        setLoading(true);
        summary().then(data => {
            setClassGroups(data);
            setLoading(false);
        });
    }

    const opButtonClick = (classGroup, thisWeek) => {
        setClassGroup(classGroup);
        setThisWeek(thisWeek);
        setOpen(true);
    }

    return (
        <Box p={4}>
            <Card raised sx={{padding: 2, boxSizing: 'border-box', width: '100%'}}>
                <CardHeader title={
                    <Stack direction="row" alignItems="center" spacing={1}>
                        <Typography variant="h5">课程编排</Typography>
                        {loading && <CircularProgress color="inherit" size={24}/>}
                    </Stack>
                }/>
                <CardContent>
                    <TableContainer component={Paper}>
                        <Table>
                            <TableHead>
                                <TableRow>
                                    <TableCell>班级</TableCell>
                                    <TableCell>课程</TableCell>
                                    <TableCell>教室</TableCell>
                                    <TableCell>教师</TableCell>
                                    <TableCell>学员</TableCell>
                                    <TableCell sx={{width: '32px'}} align="center">本周</TableCell>
                                    <TableCell sx={{width: '32px'}} align="center">下周</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {classGroups.map(e => (
                                    <TableRow key={e.id}>
                                        <TableCell>{e.name}</TableCell>
                                        <TableCell>{e.course?.name}</TableCell>
                                        <TableCell>{e.classroom?.name}</TableCell>
                                        <TableCell>{e.teacher?.name}</TableCell>
                                        <TableCell>{e.students && e.students.map(s => s.name).join(', ')}</TableCell>
                                        <TableCell align="center">
                                            <OpButton dayOfWeek={dayOfWeek} classGroup={e} thisWeek={true}
                                                      onClick={opButtonClick}/>
                                        </TableCell>
                                        <TableCell align="center">
                                            <OpButton dayOfWeek={dayOfWeek} classGroup={e} thisWeek={false}
                                                      onClick={opButtonClick}/>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </CardContent>
            </Card>

            <ManualSchedule open={open} classGroup={classGroup} thisWeek={thisWeek} onClose={(load = false) => {
                setOpen(false);
                if (load) {
                    loadSummary();
                }
            }}/>

        </Box>
    );

}

export default LessonSchedule;
